<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/publish.css">
    <title>尚街</title>
</head>
<style>

</style>
<body>
<div id="page">
    <div class="pageTop">
        <img src="../../images/profile/right_arrow.png" alt="" class='backArrow'>
        <span class="pageTitle" style="margin-left:11%;">魅力搭配</span>
        <span class="pageinstr mypublish" id="fabule">发布</span>
    </div>
    <div class="publish">
        <div class='publish_head'>
            <textarea name=""  cols="30" rows="10" placeholder="请输入您最新想法" maxlength="100" id='content'></textarea>
            <span class="countlimit">0/100</span>
        </div>
        <div class="commondiv"></div>
        <div class="publish_body">
            <p>上传图片<span>(最多三张)</span></p >

            <div style="display: flex;align-items: center;flex-wrap: wrap">
                <div class="imgContainer">

                    <!-- <div class="imgContainer_item"> -->
                    <!-- <img src="../../images/delete.png" alt="" id="diekekke">
                        <img src="../../images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="img_item">
                </div> -->
                    <!-- <div class="imgContainer_item">
                            <span>x</span>
                            <img src="../../images/O1CN01wC7XMS1Pf7y8xqBDd_!!657171867.jpg" alt="" class="img_item">
                    </div> -->


                </div>
                <div class="pushImgP" id="yichuta">
                    <input type="file" id="pushImg" accept="image/*" multiple onchange="addFiles(this)">

                    <img  class="addImg" src="../../images/upload.png" alt="">
                </div>

            </div>


        </div>
        <div class="commondiv"></div>
        <div class="publish_foot">
            <p>风格标签 <span>(最多可以选4个)</span></p >
            <div class="tags">
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">中国风</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
                <span class="shenglv">可爱</span>
            </div>

        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="../../js/back.js"></script>
<script>

    $(".shenglv").click(function(){
        if($('.tags').children('.tag_active').length>=4) return

        if($(this).hasClass('tag_active')) {
            $(this).removeClass('tag_active')
            return
        }else{
            $(this).addClass('tag_active')

        }

    })

    // 想法

    function getContent(){
        let content = $('#content').val();

        return content;
    }

    // 图片上传方法

    var fileArr=[];

    var formData = new FormData()



    function addFiles(_this) {
        var fileList = _this.files;
        var length = fileList.length;
        var newList = [];
        if(length>=3){
            for (let i = 0; i < fileList.length; i++) {
                if(i>3) break;
                newList.push(fileList[i])
            }
            fileList = newList;
        }
        for(var i=0;i<length;i++){

            fileArr.push(fileList[i]); //将图片放入数组中
            var objUrl = getObjectURL(fileList[i]);//调用函数调取图片地址

            if (objUrl && $('.imgContainer').children().length <= 2) {

                let newpic =     `<div class="imgContainer_item">
                    <img src="../../images/delete.png" alt="" class="deletePic" >
                    <img src=${objUrl} alt="" class="img_item">
                    </div>`
                var imgHtml = '< img src="' + objUrl + '">';
                $('.imgContainer').append(newpic);

                $('.imgContainer').on('click','.deletePic',function(e){
                    let indexDelete = $(this).parent('.imgContainer_item').index();

                    // console.log(e,'========', $(this).parent('.imgContainer_item').index());
                    if(indexDelete === -1) return;
                    $('.imgContainer_item').eq(indexDelete).remove();

                    fileArr.splice(indexDelete,1);

                    // console.log('suoyou=====>',fileArr)


                })
            }
        }

    }
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {//basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {//webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    $('#fabule').click(function(){
        $.each(fileArr,function(i,file){
        formData.append(i,file);
    });


    let allTags = [];
    let allactives = $('.tags').find('.tag_active');
    for (i=0;i< allactives.length;i++) {
        allTags.push(allactives[i].innerHTML)
    }

    console.log(allTags)

    //     $.ajax({
    //     url : "...",
    //       type:'POST',
    //       dataType:'json',
    //       data:formData,
    //       crossDomain: true,
    //       cache:false,
    //       processData:false,
    //       contentType:false,
    //       success:function(responseStr) {
    //           alert("成功");
    //       },
    //       error : function(responseStr) {
    //           alert("失败");

    //   }})
    })

</script>
</body>
</html>